<template>
  <div class="history-area">
    <div class="operation-list">
      <el-tooltip placement="top" content="撤销">
        <el-button circle :disabled="undoIsDisabled" :icon="RefreshLeft" @click="undoHistory"></el-button>
      </el-tooltip>

      <el-tooltip placement="top" content="重做">
        <el-button circle :disabled="redoIsDisabled" :icon="RefreshRight" @click="redoHistory"></el-button>
      </el-tooltip>
    </div>
    <li v-for="(item, index) in histories" :key="item.id">
      <span :class="{ bold: index === historyIndex }">{{ item.type }} - {{ item.data.key }}</span>
    </li>
  </div>
</template>

<script lang="ts" setup>
import { RefreshRight, RefreshLeft } from '@element-plus/icons-vue'
import { useEditorStore } from '@/stores/editor'

const store = useEditorStore()
const histories = computed(() => store.histories)
const historyIndex = computed(() => store.historyIndex)
const undoIsDisabled = computed(() => store.checkUndoDisable)
const redoIsDisabled = computed(() => store.checkRedoDisable)

const undoHistory = () => {
  store.undo()
}
const redoHistory = () => {
  store.redo()
}
</script>
<style lang="scss" scoped>
.history-area {
  position: absolute;
  right: 0;
  z-index: 500;
}
.operation-list {
  display: flex;
}
.history-area .bold {
  font-weight: bold;
}
</style>
